import { Layout, theme } from 'antd';
import type React from 'react';
import { Helmet } from 'react-helmet';

const { Header, Content, Footer } = Layout;

interface MainPageLayoutProps {
  title: string;
  description: string;
  children: React.ReactNode;
  headerContent: React.ReactNode;
}

function MainPageLayout({
  title,
  description,
  children,
  headerContent,
}: MainPageLayoutProps) {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <>
      <Helmet>
        <html lang="zh-CN" />
        <title>{title}</title>
        <meta name="description" content={description} />
      </Helmet>
      <Layout style={{ minHeight: '100vh' }}>
        <Header style={{ display: 'flex', alignItems: 'center' }}>
          {headerContent}
        </Header>
        <Layout
          style={{
            padding: '24px 0',
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Content style={{ padding: '0 24px', minHeight: 280 }}>
            {children}
          </Content>
        </Layout>
        <Footer style={{ textAlign: 'center' }}>
          SomeBank ©{new Date().getFullYear()} Created by MoonFeather
        </Footer>
      </Layout>
    </>
  );
}

export default MainPageLayout;
